import { useState } from "react";
import { Chatroom } from "./Chatroom";
import { Friends } from "./Friends";
import { Setting } from "./Setting";
import { Avatar } from "@/components/Avatar";
import { useUserStore } from "@/store/user";
import { Tooltip } from "antd";
import { Notice } from "./Notice";
import { useNavigate } from "react-router-dom";
import { Favorite } from "./Favorite";
const menus = [
  {
    name: "聊天",
    icon: "icon-liaotian",
  },
  {
    name: "好友",
    icon: "icon-haoyou",
  },
  {
    name: "通知",
    icon: "icon-tongzhi",
  },
  {
    name: "收藏",
    icon: "icon-shoucang",
  },
  {
    name: "设置",
    icon: "icon-shezhi",
  },
];

export function Home() {
  const [tab, setTab] = useState(0);
  const navigate = useNavigate();

  const { userInfo, logout } = useUserStore();

  const handleLogout = async () => {
    const [success] = await logout();
    if (success) {
      navigate("/login");
    }
  };

  return (
    <div className="h-full bg-[#979DA7]">
      <div className="flex overflow-hidden w-[90vw] h-[90vh] min-h-[470px] bg-[#272A37] absolute inset-0 mx-auto my-auto rounded-2xl">
        <div className="min-w-[80px] flex flex-col items-center justify-center py-4">
          <div className="flex-1 ">
            <Avatar src={userInfo?.avatar} />
          </div>
          <ul className="w-full text-center">
            {menus.map((menu, index) => {
              return (
                <li
                  key={menu.name}
                  className={`${
                    tab === index ? "text-[#1D90F5]" : "text-[#979DA7]"
                  } w-full mb-9 hover:text-[#1D90F5] cursor-pointer transition-all duration-100`}
                  onClick={() => setTab(index)}
                >
                  <span className={`iconfont ${menu.icon}`}></span>
                  <p className="text-sm transition-all duration-100">
                    {menu.name}
                  </p>
                </li>
              );
            })}
          </ul>
          <div className="flex-1 flex flex-col-reverse">
            <Tooltip placement="top" title="退出登录">
              <span
                className={`iconfont icon-tuichu4 !text-[26px] hover:text-red-400 text-[#979DA7] cursor-pointer transition-all duration-100`}
                onClick={handleLogout}
              ></span>
            </Tooltip>
          </div>
        </div>
        <div className="flex-1 flex">
          {tab === 0 && <Chatroom />}
          {tab === 1 && <Friends />}
          {tab === 2 && <Notice />}
          {tab === 3 && <Favorite />}
          {tab === 4 && <Setting />}
        </div>
      </div>
    </div>
  );
}
